import React, { Component } from "react";
import { View, Text, Image, StyleSheet, TouchableWithoutFeedback } from "react-native";
import { width } from "../../util/apdater_util";
import PropTypes from "prop-types";

export default class TopicCell extends Component{
  constructor(props) {
    super(props);
    this.state={
      numLines:5,
      showOpenDetail:false
    }
  }
  static propTypes={
    type:PropTypes.number,
    data:PropTypes.object,
    fromPlatform:PropTypes.bool,
    showComment:PropTypes.bool,
    cellClick:PropTypes.func,
    commentClick:PropTypes.func,
    personClick:PropTypes.func,
    menuClick:PropTypes.func,
    focusClick:PropTypes.func
  }
  static defaultProps={
    type:1,
    data:{
      images:[],
      trendComments:[]
    },
    fromPlatform:false,
    showComment:true,
    cellClick:()=>{},
    commentClick:()=>{},
    personClick:()=>{},
    menuClick:()=>{},
    focusClick:()=>{}
  }
  _renderItem=(info)=>{
    if(!this.props.data) return <View></View>
    return (
      <TouchableWithoutFeedback onPress={()=>{this.props.cellClick(this.props.data)}}>
        <View style={{backgroundColor:'#fff'}}>
          <View style={styles.cellBox}>
            <View style={styles.flex}>
              <TouchableWithoutFeedback onPress={this.props.personClick}>
                <Image style={styles.portrait} source={{uri:this.props.data.avatar}}></Image>
              </TouchableWithoutFeedback>
              <TouchableWithoutFeedback onPress={this.props.personClick}>
                <View style={{flex:1,marginLeft:7}}>
                  <Text style={styles.nickName}>{this.props.data.nickName}</Text>
                  <Text style={styles.date}>{this.props.data.createTime}</Text>
                </View>
              </TouchableWithoutFeedback>
              <TouchableWithoutFeedback onPress={this.props.focusClick.bind(this,this.props.data)}>
                <View style={styles.focusBox}>
                  <Text style={styles.focusTitle}>{this.props.data.isFollow==1?'取消关注':'+关注'}</Text>
                </View>
              </TouchableWithoutFeedback>
            </View>
            <Text style={styles.des} numberOfLines={this.state.numLines} onLayout={(event)=>{
              const height = Math.floor(event.nativeEvent.layout.height || 0);
              if (this.state.maxHeight === 0) {
                this.setState({
                  maxHeight: height,
                  numLines: 5
                });
                // 第二次当测量的最大高度>设置行数后的高度的时候，则需要展开按钮。
              }else if (this.state.maxHeight > height) {
                if (!this.state.showOpenDetail) {
                  this.setState({
                    showOpenDetail: true,
                  });
                }
              }
            }}>{this.props.data.content}</Text>
            {this.state.showOpenDetail&&(<Text style={{color:'#3CA1FD',fontSize:13,marginTop:8}} onPress={()=>this.setState({numLines:0,showOpenDetail:false})}>展开</Text>)}
            <View style={styles.imageBox}>
              {this.props.data.images.map((img,index)=>{
                return <Image style={[styles.img,{marginRight:index%3==2?0:6}]} key={'img_'+this.props.type+index} source={{uri:img}}></Image>
              })}
            </View>
            {this.props.data.topicName?(
              <View style={{flexDirection:'row',justifyContent:'flex-start'}}>
                <View style={styles.topicBox}>
                  <Image style={styles.topicIcon} source={require('../../img/topic_icon.png')}></Image>
                  <Text style={styles.topicTitle}>{this.props.data.topicName}</Text>
                </View>
              </View>
            ):null}
            {(this.props.showComment&&this.props.data.trendComments.length>0)?(
              <View style={styles.commentBox}>
                {this.props.data.trendComments.map((comment,idx)=>{
                  return (
                    <Text key={'comment'+idx} style={styles.commentName}>{comment.nickName}：<Text style={styles.commentDes}>{comment.content}</Text></Text>
                  )
                })}
                {this.props.data.commentNum>2?(
                  <Text style={styles.moreComment} onPress={this.props.commentClick}>更多评论 ></Text>
                ):null}
              </View>
            ):null}
            {this.props.fromPlatform?<Text style={styles.from}>来自平台推荐</Text>:null}
          </View>
          <View style={styles.menu}>
            <TouchableWithoutFeedback onPress={()=>{this.props.menuClick(1)}}>
              <View style={styles.menuItem}><Image style={styles.menuIcon} source={require('../../img/work_share_icon.png')}></Image><Text>{this.props.data.shareNum}</Text></View>
            </TouchableWithoutFeedback>
            <View style={[styles.menuItem]}><Image style={styles.menuIcon} source={require('../../img/work_favor_icon.png')}></Image><Text>{this.props.data.likeNum}</Text></View>
            <View style={[styles.menuItem]}><Image style={styles.menuIcon} source={require('../../img/work_message_icon.png')}></Image><Text>{this.props.data.commentNum}</Text></View>
          </View>
        </View>
      </TouchableWithoutFeedback>
    )
  }
  render(){
    return(
      <View>{this._renderItem()}</View>
    )
  }
}

const styles=StyleSheet.create({
  cellBox:{
    paddingHorizontal:15,
    paddingTop:19,
  },
  flex:{
    flexDirection:'row',
    justifyContent:'space-between',
    alignItems:'center'
  },
  portrait:{
    width:32,
    height:32,
    borderRadius:16
  },
  nickName:{
    color:'#1C1C1C',
    fontSize:12,
    fontWeight:'500'
  },
  date:{
    color:'#C5C5C5',
    fontSize: 10,
    marginTop:5
  },
  des:{
    color:'#1C1C1C',
    fontSize:15,
    marginTop:15
  },
  focusBox:{
    minWidth:59,
    height: 25,
    borderRadius: 12.5,
    paddingHorizontal:10,
    backgroundColor:'rgba(227,147,84,0.1)'
  },
  focusTitle:{
    color:'#E39354',
    lineHeight:25,
    fontSize:12,
    textAlign:'center'
  },
  imageBox:{
    flexDirection: 'row',
    justifyContent: 'flex-start',
    flexWrap:'wrap',
    marginTop: 12
  },
  img:{
    width:(width-42)/3.0,
    height:(width-42)/3.0,
    marginRight:6,
    borderRadius:4,
    marginBottom:6
  },
  topicBox:{
    height:23,
    backgroundColor:'#F4F9FD',
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems: 'center',
    paddingLeft:6,
    paddingRight:12,
    borderTopRightRadius:11.5,
    borderBottomRightRadius:11.5
  },
  topicIcon:{
    width:13,
    height:13
  },
  topicTitle:{
    color:'#3CA1FD',
    fontSize:11,
    marginLeft:4
  },
  commentBox:{
    backgroundColor:'#F6F6F8',
    borderRadius:2,
    paddingVertical:13,
    paddingHorizontal: 11,
    marginTop:10
  },
  commentName:{
    color:'#262626',
    fontSize:12,
    fontWeight: '500',
    marginBottom: 12
  },
  commentDes:{
    color:'#565656',
    fontSize:12
  },
  moreComment:{
    color:'#3CA1FD',
    fontSize:11
  },
  menu:{
    flexDirection:'row',
    justifyContent:'flex-start',
    alignItems:'center',
    height:52,
  },
  menuItem:{
    flex:1,
    flexDirection:'row',
    justifyContent:'center',
    alignItems:'center'
  },
  menuIcon:{
    width:18,
    height:18,
    marginRight:8
  },
  from:{
    color:'#C5C5C5',
    fontSize:11,
    marginTop:13
  }
})
